<template>
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      @close="closeDialog"
      width="1100px"
    >
      <div v-for="item in list" >
        
        <div class="ap-card" v-if="item.url==null||item.url==''">
        <div style="display: flex; padding-bottom: 0px">
          <div class="title col_18 no-border">增值税电子发票</div>
          <div class="extra col_6 no-border">
            <div>
              <span class="label title-label">发票代码</span>：<span
                class="content"
                >{{ item.code }}</span
              >
            </div>
            <div>
              <span class="label title-label">发票号码</span>：<span
                class="content"
                >{{ item.number }}</span
              >
            </div>
            <div>
              <span class="label title-label">开票日期</span>：<span
                class="content"
                >{{ item.date }}</span
              >
            </div>
            <div>
              <span class="label title-label">校验码</span>：<span
                class="content"
                >{{ item.checkCode }}</span
              >
            </div>
          </div>
        </div>
        <div class="div height84">
          <div class="col_1 no-border">购买方</div>
          <div class="col_15">
            <div>
              <span class="label">名称</span>：<span class="content">{{
                item.buyerName
              }}</span>
            </div>
            <div>
              <span class="label">纳税人识别号</span>：<span class="content">{{
                item.buyerTaxCode
              }}</span>
            </div>
            <div>
              <span class="label">地址及电话</span>：<span class="content">{{
                item.buyerAddressPhone
              }}</span>
            </div>
            <div>
              <span class="label">开户行及账号</span>：<span class="content">{{
                item.buyerBankAccount
              }}</span>
            </div>
          </div>
          <div class="col_1">密码区</div>
          <div
            class="col_6"
            style="
              border-top: 1px solid #b15b16;
              border-left: 1px solid #b15b16;
              border-bottom: 1px solid #b15b16;
            "
          ></div>
        </div>
        <div class="div">
          <div class="col_7 text-center" style="">货物或应税劳务、服务名称</div>
          <div class="col_5">
            <div class="text-center">规格型号</div>
          </div>
          <div class="col_2">
            <div class="text-center">单位</div>
          </div>
          <div class="col_2">
            <div class="text-center">数量</div>
          </div>
          <div class="col_2">
            <div class="text-center">单价</div>
          </div>
          <div class="col_3">
            <div class="text-center">金额</div>
          </div>
          <div class="col_2">
            <div class="text-center">税率</div>
          </div>
          <div class="col_3 no-border" style="border-right: 0px solid red">
            <div class="text-center">税额</div>
          </div>
        </div>
        <div v-for="itm in item.items">
          <div class="div">
            <div class="col_7 text-center" style="">{{ itm.name }}</div>
            <div class="col_5">
              <div class="text-center">{{ itm.quantity }}</div>
            </div>
            <div class="col_2">
              <div class="text-center">{{ itm.unit }}</div>
            </div>
            <div class="col_2">
              <div class="text-center">{{ itm.spec }}</div>
            </div>
            <div class="col_2">
              <div class="text-center">{{ itm.unitPrice }}</div>
            </div>
            <div class="col_3">
              <div class="text-center">{{ itm.amountWithoutTax }}</div>
            </div>
            <div class="col_2">
              <div class="text-center">{{ itm.taxRate }}</div>
            </div>
            <div class="col_3 no-border" style="border-right: 0px solid red">
              <div class="text-center">{{ itm.taxAmount }}</div>
            </div>
          </div>
        </div>
        <div class="div" style="border-top: #b15b16 1px solid">
          <div class="col_7 text-center">价税合计（大写）</div>
          <div class="no-border" style="margin-left: auto; padding-right: 40px">
            （小写）<span>￥{{ item.amountWithTax }}</span>
          </div>
        </div>
        <div class="div height84">
          <div class="col_1 no-border">销售方</div>
          <div class="col_15">
            <div>
              <span class="label">名称</span>：<span class="content">{{
                item.sellerName
              }}</span>
            </div>
            <div>
              <span class="label">纳税人识别号</span>：<span class="content">{{
                item.sellerTaxCode
              }}</span>
            </div>
            <div>
              <span class="label">地址及电话</span>：<span class="content">{{
                item.sellerAddressPhone
              }}</span>
            </div>
            <div>
              <span class="label">开户行及账号</span>：<span class="content">{{
                item.sellerBankAccount
              }}</span>
            </div>
          </div>
          <div class="col_1">备注</div>
          <div
            class="col_6"
            style="
              border-top: 1px solid #b15b16;
              border-left: 1px solid #b15b16;
              border-bottom: 1px solid #b15b16;
            "
          >
            {{ item.remark }}
          </div>
        </div>
      </div>
      <div v-else>
        <el-image :src="item.url">
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture /></el-icon>
          </div>
        </template>
      </el-image>
      
      </div>
    </div>
      <!-- <el-input placeholder="请输入审批意见" v-model="remark"></el-input> -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel()">关闭</el-button>
          <!-- <el-button type="success" @click="reject()">驳回</el-button> -->
          <!-- <el-button type="primary" @click="save()">通过</el-button> -->
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { ref } from "vue";
  import { httpService } from "@/utils/httpService";
  import { ElMessage, ElForm, ElMessageBox } from "element-plus";
  import { vxRule } from "@/utils/validator";
  
  export default {
    name: "AddApprovalTask",
    components: { ElForm, ElMessage, ElMessageBox },
    data() {
      return {
        dialogFormVisible: ref(false),
        formLabelWidth: "120px",
        title: "",
        id: "",
        personnelType: "",
        list: [],
        remark: "",
        addApprovalTaskForm: {
          title: "",
          submitNumber: "",
          submitName: "",
          submitTime: "",
          type: "",
        },
        // 校验规则
        addApprovalTaskrules: {
          title: vxRule(true, null, "blur"),
          submitNumber: vxRule(true, null, "blur"),
          submitName: vxRule(true, null, "blur"),
        },
      };
    },
    methods: {
      closeDialog() {
        this.clear();
      },
      cancel() {
        this.dialogFormVisible = false;
        this.clear();
      },
      getApprovalInvoiceById(id) {
                httpService("/javaApi/approvalInvoice/queryById", {id: id}, "get").then(
                    (data) => {
                        this.list.push(data);
                    }
                );
            },
      clear() {
        this.list = [];
        this.dialogFormVisible = false;
        this.remark = "";
        this.id="",
        //清空form
        this.addApprovalTaskForm.id = "";
        this.addApprovalTaskForm.title = "";
        this.addApprovalTaskForm.submitNumber = "";
        this.addApprovalTaskForm.submitName = "";
        this.addApprovalTaskForm.submitTime = "";
        this.addApprovalTaskForm.type = "";
      },
      reject() {
          if(this.remark==''){
              ElMessage.error("请输入审批意见");
  
              return;
          }
        ElMessageBox.confirm("确定要驳回报销吗？", "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = new FormData();
            params.append("id", this.id);
            params.append("status", 2);
            params.append("remark", this.remark);
            httpService(
              "/javaApi/approvalTask/updateStatus",
              params,
              "post"
            ).then((data) => {
              if (data.code == 200) {
                this.clear();
                //刷新父组件的数据
                this.$parent.getApprovalTaskList();
              } else {
                ElMessage.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      save() {
        let params = new FormData();
        params.append("id", this.id);
        params.append("status", 1);
        params.append("remark", this.remark);
        httpService("/javaApi/approvalTask/updateStatus", params, "post").then(
          (data) => {
            if (data.code == 200) {
              this.clear();
              //刷新父组件的数据
              this.$parent.getApprovalTaskList();
            } else {
              ElMessage.error(data.message);
            }
          }
        );
      },
    },
  };
  </script>
  <style  scoped>
  .text-center {
    text-align: center;
  }
  .no-border {
    border: 0px solid white;
  }
  .col_1 {
    width: 20px;
    padding: 4px;
    border-top: 1px solid #b16363;
    border-bottom: 1px solid #b16363;
    line-height: 30px;
  }
  .col_2 {
    width: 8.33%;
    border-right: 1px solid #b16363;
  }
  .col_3 {
    width: 12.5%;
    border-right: 1px solid #b16363;
  }
  .col_5 {
    width: 20.83%;
    border-right: 1px solid #b16363;
  }
  .col_6 {
    width: 28%;
    padding: 10px;
  }
  .col_7 {
    width: 220px;
    border-right: 1px solid #b16363;
    flex-shrink: 0;
    padding: 2px;
  }
  .col_8 {
    width: 33.33%;
  }
  .col_14 {
    width: 58.33%;
    border: 1px solid #b16363;
  }
  .col_15 {
    width: 62.5%;
    border: 1px solid #b15b16;
    padding: 10px;
  }
  .col_17 {
    width: 70.83%;
  }
  .col_18 {
    width: 75%;
  }
  .col_24 {
    width: 100%;
  }
  .ap-card {
    border-left: 1px solid #b16363;
    border-right: 1px solid #b16363;
    border-top: 1px solid #b16363;
    margin-bottom: 20px;
  }
  .title {
    font-size: 26px;
    color: #b16363;
    text-align: center;
    line-height: 86px;
  }
  .extra {
    color: #b15b16;
    padding: 10px;
  }
  
  .extra .content {
    color: #181818;
  }
  .height84 {
    height: 104px;
  }
  .row {
    border: 1px solid #b16363;
    border-bottom: none;
    color: #b15b16;
  }
  .row .content {
    color: #181818;
  }
  .last-row {
    color: #b15b16;
    border-top: 1px solid #b16363;
  }
  .last-row .content {
    color: #181818;
  }
  
  .label {
    width: 90px;
    display: inline-block;
    text-align-last: justify;
    text-align: justify;
  }
  .title-label {
    width: 60px;
  }
  .div {
    display: flex;
  }
  .item {
    text-align: center;
    color: #181818;
    padding: 4px 0;
  }
  .span {
    display: inline-block;
    padding: 8px;
    box-sizing: border-box;
    vertical-align: middle;
    border-left: 1px solid #b16363;
    height: 100%;
  }
  .span .text-center {
    text-align: center;
  }
  </style>